<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 禁用电话号码检测功能，禁止对数字随便可以拨号 -->
		<meta name="format-detection" content="telephone=no">
		<!-- 禁用地址检测功能，禁止跳转到地图 -->
		<meta name="format-detection" content="address=no">
		<!-- 在苹果设备上以全屏方式打开本网页 -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<!-- 设置在苹果设备上状态的颜色，默认白色，要设置成什么颜色以Web颜色的风格而定 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="white">
		<title>微信商城-购物车</title>
		<%@ include file="/views/common/required.jspf"%>
		<link rel="stylesheet" href="${ctx}/statics/common/styles/shopcar.css" />
		<!-- 苹果设备在桌面上生成的快捷图标 -->
		<link rel="apple-touch-icon" href="${ctx}/statics/common/img/apple-touch-icon.png">
		<link rel="icon" href="${ctx}/statics/common/img/favicon.ico">
	</head>
	
	<body>
		<header class="header-wrapper">
			<ul class="header-list">
				<li class="list-active">
					<a href="${ctx }/product/listProduct.html">
						<i class="fa fa-2x fa-home"></i>
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="">
						<i class="fa fa-2x fa-shopping-cart"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="${ctx }/user/userInfo.html">
						<i class="fa fa-2x fa-user"></i>
						<p>用户中心</p>
					</a>
				</li>
			</ul>
		</header>
		<section style="width: 100%; height: .6rem;"></section>
		
        <section class="shopcar-container">
        <c:forEach items="${storeCartPageModel.list }"  var="sc"  varStatus="v">
        	<div class="container-item">
        		<a href="">
        			<div class="item-top">
	        			<img src="${ctx}/statics/common/img/product1.png"/>
	        			<div class="top-right">
	        				<span>${sc.storeName }</span>
	        			</div>
	        		</div>
        		</a>
        		<div class="item-center">
        			<div class="center-span">
        				<span>数量:</span>
        			</div>
        			<div class="center-inner">
						<div class="inner-Reduction" onclick="d(this,${sc.id})">
					    	-
					    </div>
					    <input class="shopcar-value" type="text" style="width: 1.2rem;height: .3rem;border: none;text-align: center;color: #990000;font-size: .16rem;font-weight: bold;position: absolute;top: 0;left: 21%;" value="${sc.count }"/>
					    <div class="inner-plus" onclick="u(this,${sc.id})">
					    	+
					    </div>
					</div>
        		</div>
        		<div class="item-bottom">
        			<div class="bottom-span">
        				<span>小计：</span>
        			</div>
        			<div class="bottom-right">
        				￥<span class="price" >${sc.price*sc.count }</span>&nbsp;&nbsp;&nbsp;&nbsp;
        				<i class="fa fa-trash-o fa-2x right-delete"></i>	
        			</div>
        		</div>
        	</div>
			</c:forEach>
  
        	<div class="container-inner" style="<c:if test="${storeCartPageModel.list } != null">display:none</c:if>
        										<c:if test="${storeCartPageModel.list } == null">display:block</c:if>">
        		<div class="inner-car">
        			<img src="${ctx}/statics/common/img/cart_pic.png"/>
        		</div>
        		<p>您还没有宝贝，赶快去逛逛吧!</p>
        		<div class="inner-now">
        			<a href="productlist.html">马上去逛逛</a>
        		</div>
        	</div>
        </section>
        
       <section style="width: 100%;height: .5rem;"></section>
        <footer class="shopcar-footer">
        	<div class="footer-left">
        		<i class="fa fa-trash-o fa-2x clear"></i>
        		<span>清空</span>&nbsp;&nbsp;&nbsp;&nbsp;
        		<span class="left-price" >总价：￥ <span id="ttp">${ttp }</span></span>
        	</div>
        	<div class="footer-right">
        		<a href="${ctx }/order/toAccount.html">结算</a>
        	</div>
        </footer>
	</body>
	<script type="text/javascript">
	    function u(obj,id){
			var mulit =	parseInt($(obj).prev().val());
			var totalprices = parseInt($(obj).parent().parent().next().children().children("span.price").text());
			var price = totalprices / mulit;
			var ttp = parseInt($("#ttp").text());
		
			$.post('<%=request.getContextPath()%>/product/upcount.html?id='+id,function(data){
			});
			$(obj).prev().val(mulit+1);
			$(obj).parent().parent().next().children().children("span.price").text(price*(mulit+1));
	   		$("#ttp").text(ttp+price);
	    }
	    function d(obj,id){
	    	var mulit =	parseInt($(obj).next().val());
			var totalprices = parseInt($(obj).parent().parent().next().children().children("span.price").text());
			var price = totalprices / mulit;
			var ttp = parseInt($("#ttp").text());
			
			if(mulit == 1){
				$(obj).next().val(1);
			}else{
			$.post('<%=request.getContextPath()%>/product/downcount.html?id='+id,function(data){
			});
			$(obj).next().val(mulit-1);
			$(obj).parent().parent().next().children().children("span.price").text(price*(mulit-1));
			$("#ttp").text(ttp-price);
			}
	    }
	</script>
</html>
